<template>
  <div class="userManagement">
    <!-- <h1>用户管理</h1> -->
    <div style="width: 98%; margin: auto">
      <div class="header">
        <div>
          <el-button type="primary" @click="newlyAdded('新增')">
            新增
          </el-button>
          <!-- <el-button>批量删除</el-button> -->
        </div>
        <div class="header-right">
          <el-input
            placeholder="请输入用户名称"
            prefix-icon="el-icon-search"
            v-model="searchinput"
            clearable
          ></el-input>
          <el-button type="primary" @click="primary">查询</el-button>
        </div>
      </div>
      <el-table
        :data="userList"
        :header-cell-style="{
          background: '#F5F7FA',
          'font-weight': '700',
          color: '#000',
        }"
      >
        <el-table-column type="selection" width="55"> </el-table-column>
        <el-table-column
          type="index"
          header-align="left"
          align="left"
          width="80"
          label="序号"
        ></el-table-column>
        <el-table-column
          prop="userName"
          align="left"
          label="用户名"
        ></el-table-column>
        <el-table-column
          prop="phone"
          align="left"
          label="手机号"
        ></el-table-column>
        <el-table-column
          prop="account"
          align="left"
          label="类别"
        ></el-table-column>
        <el-table-column prop="status" align="left" label="状态">
          <template slot-scope="scope">
            <el-tag v-if="scope.row.status === 0" size="small" type="danger"
              >禁用</el-tag
            >
            <el-tag v-else size="small">正常</el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="createTime" align="left" label="创建时间">
          <template> 2022-01-13 08:48:25 </template>
        </el-table-column>
        <el-table-column
          fixed="right"
          header-align="left"
          align="left"
          width="150"
          label="操作"
        >
          <template slot-scope="scope">
            <el-button
              type="text"
              size="small"
              @click="addOrUpdateHandle(scope.row)"
              >修改</el-button
            >
            <el-button type="text" size="small" @click="userdelete(scope.row)"
              >删除</el-button
            >
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
        background
        layout="prev, pager, next"
        :total="total"
        @current-change="handleCurrentChange"
      >
      </el-pagination>
    </div>
    <el-dialog
      :title="title"
      :visible.sync="carInfoVisible"
      class="carInfo"
      width="30%"
    >
      <el-form ref="form" :model="form" label-width="80px">
        <el-form-item label="用户名">
          <el-input v-model="form.userName"></el-input>
        </el-form-item>
        <el-form-item label="密码">
          <el-input v-model="form.password" show-password></el-input>
        </el-form-item>
        <el-form-item label="手机号">
          <el-input v-model="form.phone" maxlength="11"></el-input>
        </el-form-item>
        <el-form-item label="用户权限">
          <el-select v-model="form.account" placeholder="请选择用户权限">
            <el-option label="用户" value="用户"></el-option>
            <el-option label="管理员" value="管理员"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="onSubmit">确认</el-button>
          <el-button @click="carInfoVisible = false">取消</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>
  </div>
</template>
<script>
import {
  getUserAllList,
  delUerParams,
  saveOrUpdateUser,
} from "../common/Api/index";
export default {
  data() {
    return {
      searchinput: "",
      carInfoVisible: false,
      form: {
        userName: "",
        password: "",
        account: "",
        phone: "",
        uid: "",
      },
      userList: [],
      title: "",
      size: 1,
      limit: 10,
      total: null,
    };
  },
  activated() {},
  mounted() {
    this.addApproval();
  },
  methods: {
    primary() {
      this.addApproval();
    },
    newlyAdded(item) {
      this.form = {
        userName: "",
        password: "",
        account: "",
        phone: "",
        uid: "",
      };
      this.title = item;
      this.carInfoVisible = true;
    },
    userdelete(item) {
      console.log(item);
      this.$confirm("此操作将永久用户, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          delUerParams(item.uId).then((res) => {
            if (res == true) {
              console.log(res);
              this.$message({
                type: "success",
                message: "删除成功!",
              });
              this.addApproval();
              return;
            }
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },
    addApproval() {
      let arr = {
        userName: this.searchinput,
        pagnum: this.size,
        limit: this.limit,
      };

      getUserAllList(arr).then((res) => {
        this.userList = res.records;
        this.total = res.total;
      });
    },
    onSubmit() {
      saveOrUpdateUser(this.form).then((res) => {
        if (res == "添加成功") {
          this.$message("添加成功");
          this.carInfoVisible = false;
          this.addApproval();
        } else if (res == "修改成功") {
          this.$message("修改成功");
          this.carInfoVisible = false;
          this.addApproval();
        } else {
          this.$message.error(res);
        }
      });
    },
    addOrUpdateHandle(item) {
      this.title = "编辑";
      this.form = item;
      this.carInfoVisible = true;
    },
    handleCurrentChange(val) {
      this.size = val;
      this.addApproval();
      console.log(val);
    },
  },
};
</script>
<style lang="scss">
.userManagement {
  width: 100%;
  height: 100%;
  background: #fff;
  .header {
    display: flex;
    justify-content: space-between;
    padding: 20px 0;
    .header-right {
      width: 20%;
      .el-input {
        width: 70% !important;
      }
    }
  }
}
</style>